<template>
  <div>
  <el-form ref="interfaceRef" :model="form"  label-width="80px">
    <el-form-item label="选择接口" prop="interfaceCode">
      <el-tree-select
          v-model="interfaceCode"
          :data="treeInterface"
          :clearable="true"
          :render-after-expand="false"
          style="width: 100px;"
          placeholder="请选择接口"
          @change="handleSelectChange"
      />
    </el-form-item>
    <el-form-item label="" style="margin-top: 5px;">
      <el-button type="primary" @click="open=true">参数设置</el-button>
      <el-button type="primary" v-show="props.showReturnValue" @click="returnValueBind">返回值绑定</el-button>
    </el-form-item>

  </el-form>
  <!-- 添加或修改业务功能对话框 -->
  <el-dialog title="参数设置" v-model="open" width="70%" height="95vh" append-to-body>
    <InterfaceParameter
        ref="interfaceParameterRef"  :parameterList="parameterList" @ok="changeParameters" @cancel="cancelChange" />
  </el-dialog>
  <el-dialog title="返回值绑定" v-model="openReturnValDialog" width="70%" height="95vh"  append-to-body>
    <InterfaceReturnValue
        ref="interfaceReturnRef"  :returnValueList="returnValueList" @ok="changeReturnValue1" @cancel="cancelReturnValueChange" />
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, ref, toRefs, watch} from "vue";
import { tree } from "@/api/business/interface";
import { parameterTreeSelect } from "@/api/business/parameter";
import { returnValTreeSelect } from "@/api/business/value";
import InterfaceParameter from "./InterfaceParameter.vue";
import InterfaceReturnValue from "./InterfaceReturnValue.vue";

interface Props {
  interfaceCode: string,
  interfaceType: string,
  parameterList: object,
  showReturnValue:boolean,//是否显示返回值绑定
  parentId:string, //绑定的父对话框
  returnValueList:object//初始化的已绑定列表
}
interface Emits {
  (e: 'change',interfaceCode:string,parameterList: object): void,
  (e: 'changeReturnValue',interfaceCode:string,returnValueList: object): void,
}
const open = ref(false)
const emits = defineEmits<Emits>()
const { proxy } = getCurrentInstance();

const props = defineProps<Props>()
const loading = ref(false)
const openReturnValDialog =ref(false)
const parameterList = ref([]);
const returnValueList = ref([]);
const interfaceCode = ref(props.interfaceCode);
const data = reactive({
  form: {},
  queryParams:{
      interfaceCode:'',
      pageSize:1000,
      pageNum:1
  }
});
const treeInterface=ref([])
const { form,queryParams } = toRefs(data);
watch(() => [props.parameterList], (newValue, oldValue) => {
  ////debugger;
  if(JSON.stringify(newValue)==JSON.stringify(oldValue)){
    return;
  }
  if(props.parameterList && JSON.stringify(parameterList.value)!=JSON.stringify(props.parameterList)) {
    console.log('parameterList.value = props.parameterList');
    console.log('before parameterList.value:'+ JSON.stringify(parameterList.value))
    parameterList.value = props.parameterList;
  }
  console.log('InterfaceSelect.vue watch parameterList.value:'+ JSON.stringify(parameterList.value))
}, { immediate: true })

watch(() => [props.interfaceCode], (newValue, oldValue) => {
  ////debugger;
  if (JSON.stringify(newValue) == JSON.stringify(oldValue)) {
    return;
  }
  queryParams.value.interfaceCode = props.interfaceCode;
}, { immediate: true })
watch(() => [props.returnValueList], (newValue, oldValue) => {
  ////debugger;
  if(JSON.stringify(newValue)==JSON.stringify(oldValue)){
    return;
  }
  if(props.showReturnValue && props.returnValueList && JSON.stringify(returnValueList.value)!=JSON.stringify(props.returnValueList)) {
    returnValueList.value = props.returnValueList;
  }
  console.log('InterfaceSelect.vue watch returnValueList.value:'+ JSON.stringify(returnValueList.value))
}, { immediate: true })

async function handleSelectChange(value) {
  // 处理清空情况
  if (!value) {
    // 清空时重置相关数据
    parameterList.value = [];
    returnValueList.value = [];
    emits("change", interfaceCode.value, parameterList.value);
    if(props.showReturnValue){
      emits("changeReturnValue", interfaceCode.value, returnValueList.value);
    }
    return;
  }
  // 查询接口参数树列表
  try {
    loading.value = true;
    console.log('props.interfaceCode:' + value)
    queryParams.value.interfaceCode = value;
    let response = await parameterTreeSelect(queryParams.value)
    //排查业务不可见的参数
    parameterList.value = response.data;
    console.log('InterfaceSelect.vue handleSelectChange parameterList.value:'+ JSON.stringify(parameterList.value))
    //如果需要绑定返回值，则查询应答列表参数
    emits("change", interfaceCode.value, parameterList.value);
    if(props.showReturnValue){
      response = await returnValTreeSelect(queryParams.value)
      returnValueList.value = response.data;
      emits("changeReturnValue", interfaceCode.value, returnValueList.value);
      console.log('InterfaceSelect.vue handleSelectChange returnValueList.value:'+ JSON.stringify(returnValueList.value))
    }
    loading.value = false;
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false;
  }
}

/**
 * 返回值绑定
 */
async function returnValueBind() {
  //debugger;
  if (!returnValueList.value || returnValueList.value.length == 0) {
    if (props.showReturnValue && queryParams.value.interfaceCode.length>0) {
      let response = await returnValTreeSelect(queryParams.value)
      returnValueList.value = response.data;
      console.log('InterfaceSelect.vue handleSelectChange returnValueList.value:' + JSON.stringify(returnValueList.value))
      openReturnValDialog.value=true
    }
  }else{
    openReturnValDialog.value=true
  }
}
/** 获取接口树列表 */
function getTreeInterface(){
  //debugger;
  let tmp={};
  if(props.interfaceType){
    tmp={"interfaceType":props.interfaceType}
  }
  tree(tmp).then(response => {
    treeInterface.value = response.data;
  });
}

/**
 * 改变参数列表
 */
function changeParameters(value){
  if(JSON.stringify(parameterList.value)!=JSON.stringify(value)) {
    parameterList.value = value;
    emits("change", interfaceCode.value, parameterList.value);
  }
  open.value = false;
}

/**
 * 取消改变参数列表
 */
function cancelChange(){
  open.value = false;
}
function changeReturnValue1(value) {
  //debugger;
  // if(JSON.stringify(returnValueList.value)!=JSON.stringify(value)) {
    returnValueList.value = value;
    emits("changeReturnValue", interfaceCode.value, returnValueList.value);
  // }
  open.value = false;
  openReturnValDialog.value = false;
}
function cancelReturnValueChange(){
  openReturnValDialog.value = false;
}
getTreeInterface();
</script>
